<template>
  <el-card shadow="hover" style="border-radius: 10px;">
    <el-tabs v-model="activeName" type="card">

      <span class="btn" @click="Init" style="user-select: none">刷新数据</span>

      <el-tab-pane label="文章管理" name="first">
        <p style="text-align: center">
          <el-input
              v-model="searchArticle"
              size="mini"
              placeholder="输入标题搜索"
              style="width: 30%"/>
          <el-button type="danger" plain @click="toggleSelection1" style="margin-left: 200px">删除所选</el-button>
        </p>
        <el-table
            :data="articles.filter(data => !searchArticle || data.title.toLowerCase().includes(searchArticle.toLowerCase()))"
            tooltip-effect="dark"
            style="margin: 10px auto;width: 1000px"
            @cell-click="handle4"
            :default-sort = "{prop: 'time', order: 'descending'}"
            @selection-change="handleSelectionChange1">
          <el-table-column
              type="selection"
              width="65">
          </el-table-column>
          <el-table-column
              label="ID"
              width="100"
              sortable
              prop="id">
          </el-table-column>
          <el-table-column
              prop="title"
              label="标题"
              width="255">
          </el-table-column>
          <el-table-column
              prop="author"
              label="作者"
              width="210">
          </el-table-column>
          <el-table-column
              prop="kind"
              label="分类"
              width="210">
          </el-table-column>
          <el-table-column
              prop="time"
              label="更新时间"
              sortable
              width="160">
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="用户管理" name="user">
        <p style="text-align: center">
          <el-input
              v-model="searchUser"
              size="mini"
              placeholder="输入用户名搜索"
              style="width: 30%"/>
          <el-button type="danger" plain @click="toggleSelection2" style="margin-left: 200px">删除所选</el-button>
        </p>
        <el-table
            :data="users.filter(data=>!data.level)
            .filter(data => !searchUser || data.username.toLowerCase().includes(searchUser.toLowerCase()))"
            tooltip-effect="dark"
            style="margin: 10px auto;width: 1000px"
            @cell-click="handle1"
            @selection-change="handleSelectionChange2">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="ID"
              width="120"
              sortable
              prop="id">
          </el-table-column>
          <el-table-column
              prop="username"
              label="用户名"
              width="125">
          </el-table-column>
          <el-table-column
              prop="password"
              label="密码"
              width="175"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              label="头像"
              width="75"
              show-overflow-tooltip>
            <template v-slot="scope">
              <div class="block">
                <img :src="scope.row.image" height="23">
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="qq"
              label="QQ"
              width="125">
          </el-table-column>
          <el-table-column
              prop="wechat"
              label="微信"
              width="125">
          </el-table-column>
          <el-table-column
              prop="email"
              label="邮箱"
              width="200"
              show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="图片管理" name="second">
        <p style="text-align: center">
          <el-input
              v-model="searchImage"
              size="mini"
              placeholder="输入从属文章Id搜索"
              style="width: 30%"/>
          <el-button type="danger" plain @click="toggleSelection3" style="margin-left: 200px">删除所选</el-button>
        </p>
        <el-table
            :data="images.filter(data => !searchImage || (data.dependenceId+'').includes(searchImage))"
            tooltip-effect="dark"
            style="margin: 10px auto;width: 1000px"
            :default-sort = "{prop: 'dependenceId', order: 'descending'}"
            @cell-click="handle2"
            @selection-change="handleSelectionChange3">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="ID"
              width="120"
              prop="id">
          </el-table-column>
          <el-table-column
              prop="image"
              label="图片名称"
              width="605">
          </el-table-column>
          <el-table-column
              label="从属文章"
              sortable
              width="220">
            <template v-slot="scope">
              {{searchArticleTitle(scope.row.dependenceId)}}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="分类管理" name="third">
        <el-button type="danger" plain @click="toggleSelection4" style="float: right;margin-right: 300px">删除所选</el-button>
        <el-table
            :data="kinds"
            tooltip-effect="dark"
            style="margin: 10px auto;width: 1000px"
            @cell-click="handle3"
            @selection-change="handleSelectionChange4">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="ID"
              width="325"
              prop="id">
          </el-table-column>
          <el-table-column
              prop="name"
              label="分类名称"
              width="620">
          </el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>

    <el-dialog title="用户配置" v-model="visible1">

      <div class="mid">
        <!--      头像-->
        <div class="block"><el-avatar :size="200" :src="formuser.image" class="image"></el-avatar></div>
        <p><span>头像URL</span><el-input v-model="formuser.image" placeholder="头像地址" disabled></el-input></p>
        <el-divider></el-divider>
        <!--      用户名-->
        <p><span>用户名</span><el-input v-model="formuser.username" placeholder="用户名"></el-input></p>
        <el-divider></el-divider>
        <!--      Email-->
        <p><span>Email</span><el-input v-model="formuser.email" placeholder="Email"></el-input></p>
        <el-divider></el-divider>
        <!--      QQ-->
        <p><span>QQ</span><el-input v-model="formuser.qq" placeholder="QQ"></el-input></p>
        <el-divider></el-divider>
        <!--      Wechat-->
        <p><span>微信</span><el-input v-model="formuser.wechat" placeholder="wechat"></el-input></p>
        <el-divider></el-divider>
        <!--      bilibili-->
        <p><span>bilibili</span><el-input v-model="formuser.bilibili" placeholder="bilibili"></el-input></p>
        <el-divider></el-divider>
        <!--      CloudMusic-->
        <p><span>网易云</span><el-input v-model="formuser.cloudMusic" placeholder="网易云"></el-input></p>
        <el-divider></el-divider>
        <!--      CloudMusicIds-->
        <p>
          <span>网易云音乐id组</span>
          <el-input type="textarea"
                    :rows="5"
                    v-model="formuser.music"
                    placeholder="用于左下角音乐播放的循环列表,id可在网易云网页版对应的歌曲链接中找到,请用回车隔开每个id,且最后一行不要留空">
          </el-input>
        </p>
        <el-divider></el-divider>
        <!--      level-->
        <p>
          <span>级别</span>

          <el-select v-model="formuser.level" placeholder="请选择" disabled>
            <el-option
                v-for="item in optionsLevel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </p>
        <el-divider></el-divider>

        <p style="text-align: center;"><el-button type="info" @click="submit" plain>修改信息</el-button></p>
      </div>
    </el-dialog>

    <el-dialog title="图片配置" v-model="visible2">
<!--      <p v-show="formimage.dependenceId">{{this.searchArticleTitle(formimage.dependenceId)}}</p>-->
      <el-descriptions class="margin-top" title="" :column="1" size="" border>
        <el-descriptions-item>
          <template v-slot:label>
            图片存储地址
          </template>
          {{formimage.address}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            图片访问地址
          </template>
          <a :href="imageAddress+formimage.image" target="_blank">{{imageAddress+formimage.image}}</a>
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            图片预览
          </template>
          <img :src="imageAddress+formimage.image" style="width: 100%;">
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            所属文章
          </template>
          <p style="text-align: center" @click="$router.push('/index/content/'+formimage.dependenceId)">
            <span style="text-decoration: underline;color: brown" class="btn" >{{searchArticleTitle(formimage.dependenceId)}}</span>
          </p>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="分类配置" v-model="visible3">
      <el-input v-model="formkind.name" placeholder="分类名"></el-input>
      <p style="height: 20px"></p>
      <el-button @click="visible3=false">取 消</el-button>
      <el-button type="primary" @click="kindUpdate">确 定</el-button>
    </el-dialog>

  </el-card>
</template>

<script>
import {updateById, userDelete, userList} from "@/api/user";
import {imageDelete, imageList} from "@/api/upload";
import {getList, kindDelete, updateKind} from "@/api/kind";
import {articleDelete, articleList} from "@/api/article";
import pubsub from "pubsub-js";

export default {
  name: "indexT",
  data(){
    return{
      activeName: 'first',
      users:[],
      images:[],
      kinds:[],
      articles:[],
      visible1:false,
      visible2:false,
      visible3:false,
      visible4:false,
      formuser:{},
      formimage:{},
      formkind:{},
      searchArticle:null,
      searchImage:null,
      searchKind:null,
      searchUser:null,
      userIds:[],
      imageNames:[],
      kindIds:[],
      articleIds:[]
    }
  },
  methods:{
    searchArticleTitle(id){
      let x=null;
      this.articles.forEach(p=>{
        if(p.id===id) x=p.title;
      });
      return x;
    },
    handleSelectionChange1(val) {
      let ids=[];
      val.forEach(data=>{
        ids.push(data.id);
      })
      this.articleIds=ids;
      console.log(this.articleIds)
    },
    handleSelectionChange2(val) {
      let ids=[];
      val.forEach(data=>{
        ids.push(data.id);
      })
      this.userIds=ids;
      console.log(this.userIds)
    },
    handleSelectionChange3(val) {
      let ids=[];
      val.forEach(data=>{
        ids.push(data.image);
      })
      this.imageIds=ids;
      console.log(this.imageIds)
    },
    handleSelectionChange4(val) {
      let ids=[];
      val.forEach(data=>{
        ids.push(data.id);
      })
      this.kindIds=ids;
      console.log(this.kindIds)
    },
    toggleSelection1() {
      console.log(this.articleIds);

      this.$confirm('执行删除操作?', '提示', {

        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {

        articleDelete(this.articleIds).then(res=>{

          let x=res.data;

          if(x.code==="100") {
            this.$notify.success(this.notifyMsgSuc(x.data));
            this.Init();
          }

          else this.$notify.error(this.notifyMsgErr(x.msg));

        }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

      }).catch(() => {

        this.$message({
          type: 'info',
          message: '已取消删除'
        });

      });
    },
    toggleSelection2() {
      console.log(this.userIds);

      this.$confirm('执行删除操作?', '提示', {

        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {

        userDelete(this.userIds).then(res=>{

          let x=res.data;

          if(x.code==="100") {
            this.$notify.success(this.notifyMsgSuc(x.data));
            this.Init();
          }

          else this.$notify.error(this.notifyMsgErr(x.msg));

        }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

      }).catch(() => {

        this.$message({
          type: 'info',
          message: '已取消删除'
        });

      });
    },
    toggleSelection3() {
      console.log(this.imageIds);

      this.$confirm('执行删除操作?', '提示', {

        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {

        imageDelete(this.imageIds).then(res=>{

          let x=res.data;

          if(x.code==="100") {
            this.$notify.success(this.notifyMsgSuc(x.data));
            this.Init();
          }

          else this.$notify.error(this.notifyMsgErr(x.msg));

        }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

      }).catch(() => {

        this.$message({
          type: 'info',
          message: '已取消删除'
        });

      });

    },
    toggleSelection4() {

      console.log(this.kindIds);

      this.$confirm('执行删除操作?', '提示', {

        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {

        kindDelete(this.kindIds).then(res=>{

          let x=res.data;

          if(x.code==="100") {
            this.$notify.success(this.notifyMsgSuc(x.data));
            this.Init();
          }

          else this.$notify.error(this.notifyMsgErr(x.msg));

        }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

      }).catch(() => {

        this.$message({
          type: 'info',
          message: '已取消删除'
        });

      });

    },
    handle1(row) {
      this.formuser=row;
      this.visible1=true;
    },
    handle2(row) {
      this.formimage=row;
      this.visible2=true;
    },
    handle3(row) {
      this.formkind=row;
      this.visible3=true;
    },
    handle4(row) {
      // this.formkind=row;
      this.$router.push({
        path:'/index/edit',
        query:{
          id:row.id
        }
      })
    },
    kindUpdate(){

      this.visible3=false;
      updateKind(this.formkind).then(res=>{

        let x=res.data;
        if(x.code==="100") this.$notify.success(this.notifyMsgSuc(x.data));
        else this.$notify.error(this.notifyMsgErr(x.msg));

        pubsub.publish('update')

      }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

    },
    submit(){
      this.$confirm('是否提交修改?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let image=this.formuser.image;
        this.formuser.image=null;

        updateById(this.formuser).then(res=>{

          let x = res.data;
          if(x.data==="更新失败") this.$notify.error(this.notifyMsgErr(x.data));
          else this.$notify.success(this.notifyMsgSuc("更新成功!"));

          this.formuser.image=image;
          this.visible1=false;

        }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    Init(){

      pubsub.publish('update');

      articleList().then(res=>{

        console.log(res.data.data)

        if(res.data.code==="100")this.articles=res.data.data;
        else this.$notify.error(this.notifyMsgErr(res.data.msg));

      }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

      userList().then(res=>{

        console.log(res.data.data)

        if(res.data.code==="100")this.users=res.data.data;
        else this.$notify.error(this.notifyMsgErr(res.data.msg));

      }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

      imageList().then(res=>{
        console.log(res.data.data)

        if(res.data.code==="100")this.images=res.data.data;
        else this.$notify.error(this.notifyMsgErr(res.data.msg));

      }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));

      getList().then(res=>{
        console.log(res.data.data)

        if(res.data.code==="100")this.kinds=res.data.data;
        else this.$notify.error(this.notifyMsgErr(res.data.msg));

      }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
    }
  },
  mounted() {

    this.Init();

  }
}
</script>

<style lang="less" scoped>
.el-table /deep/ tr{
  cursor: pointer;
}
img{
  max-width: 720px;
}
.mid{
  margin: 20px auto;
  width: 700px;
}
.block{
  text-align: center;
}
.image{
  &:hover{
    cursor: pointer;
    opacity: 0.8;
  }
}
p{
  margin: 10px;
  span{
    width: 30%;
    display: inline-block;
  }
}
.el-input{
  width: 70%;
}
</style>
